<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" class="myinput" maxlength="20" />
    <script>
      //节流: 代码在间隔一段时间内不停的执行   需要控制频率
      //技能的cd
      //一.普通的节流
      //一.方式一:
      //   var timer = null;
      //   document.onmousemove = function () {
      //     if (!timer) {
      //       console.log("执行了");
      //       timer = setTimeout(function () {
      //         timer = null;
      //       }, 500);
      //     }
      //   };

      //2.方式二.时间戳
      //   var ele = document.querySelector(".myinput");
      //   var startTime = new Date().getTime();
      //   ele.oninput = function () {
      //     // console.log(ele.value);
      //     var endTime = new Da22te().getTime();
      //     if (endTime - startTime > 1000) {
      //       console.log(ele.value);
      //       startTime = endTime;//重新计时
      //     }
      //   };

      //   var ele = document.querySelector(".myinput");

      //   ele.oninput = throttle(function () {
      //     console.log(ele.value);
      //   }, 1000);

      // 写一下 通用节流函数；
      //二.通用节流函数(时间戳)
      //   function throttle(fn, delay) {
      //     var startTime = new Date().getTime();
      //     return function () {
      //       var endTime = new Date().getTime();
      //       if (endTime - startTime > delay) {
      //         fn();
      //         startTime = endTime;
      //       }
      //     };
      //   }

      //   通用节流函数(普通节流)
      /* function throttle(fn, delay) {
        var timer = null;
        return function () {
          if (!timer) {
            fn();
            timer = setTimeout(function () {
              timer = null;
            }, delay);
          }
        };
      }

      document.onmousemove = throttle(function () {
        console.log("移动了");
      }, 500); */

      function throttle(fn, delay) {
        var timer = null;
        return function (e) {
          //console.log("??",e)
          if (!timer) {
            //需要把fn函数里的this修改成事件函数里的this
            //fn()
            fn.call(this.e);
            timer = setTimeout(function () {
              timer = null;
            }, delay);
          }
        };
      }
      var ele = document.querySelector(".myinput");
      //把this的指向改回事件源  2.事件对象需要传入到防抖或者节流函数里面
      ele.oninput = throttle(function (e) {
        console.log("事件对象是", e);
        // console.log(ele.value);
        console.log(this.value);
      }, 1000);
    </script>
  </body>
</html>
